<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">
    <style>
        .progress-area {
            padding: 20px;
        }
    </style>
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>

                        <li>
                            姓名：<input type="text" name="vname"/>
                        </li>

                        <li>
                            年龄：<input type="text" name="age"/>
                        </li>

                        <li>
                            所属村组：<input type="text" name="grouptype"/>
                        </li>

                        <li>
                            性别：<input list="sex"  name="sex"/>
                            <datalist id="sex">
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="未知">未知</option>
                            </datalist>
                        </li>
                        <li>
                            户籍：<input type="text" name="nativeplace"/>
                        </li>

                        <!--<li>
                            民族：<input type="text" name="nation"/>
                        </li>-->

                        <li>
                            政治面貌：<input list="politics"  name="politics"/>
                            <datalist id="politics">
                                <option value="群众">群众</option>
                                <option value="中共党员">中共党员</option>
                                <option value="中共预备党员">中共预备党员</option>
                                <option value="共青团员">共青团员</option>
                                <option value="民革党员">民革党员</option>
                                <option value="民盟盟员">民盟盟员</option>
                                <option value="民建会员">民建会员</option>
                                <option value="民进会员">民进会员</option>
                                <option value="台盟盟员">台盟盟员</option>
                                <option value="农工党党员">农工党党员</option>
                                <option value="致公党党员">致公党党员</option>
                                <option value="无党派人士">无党派人士</option>
                                <option value="九三学社社员">九三学社社员</option>
                            </datalist>
                        </li>

                        <!--<li>-->
                        <!--入党年月：<input type="text" name="partyjoindate"/>-->
                        <!--</li>-->
                        <li>
                            文化程度：<input list="edulevel"  name="edulevel"/>
                            <datalist id="edulevel">
                                <option value="本科">本科</option>
                                <option value="研究生">研究生</option>
                                <option value="大专">大专</option>
                                <option value="中专">中专</option>
                                <option value="高中">高中</option>
                                <option value="初中">初中</option>
                                <option value="小学">小学</option>
                            </datalist>
                        </li>

                        <li>
                            婚姻状况：<input list="marital"  name="marital"/>
                            <datalist id="marital">
                                <option value="未婚">未婚</option>
                                <option value="已婚">已婚</option>
                                <option value="丧偶">丧偶</option>
                                <option value="离婚">离婚</option>
                            </datalist>
                        </li>

                        <!--<li>
                            身份证号码：<input type="text" name="idcard"/>
                        </li>-->

                        <li>
                            手机号码：<input type="text" name="phone"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="village:villagerInfo:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="village:villagerInfo:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="village:villagerInfo:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info" onclick="importExcel()">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-info" onclick="importphoto()">
                <i class="fa fa-upload"></i> 上传
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="village:villagerInfo:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('village:villagerInfo:edit')}]];
    var removeFlag = [[${@permission.hasPermi('village:villagerInfo:remove')}]];
    var prefix = ctx + "village/villagerInfo";

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            uploadUrl: prefix+"/testuploadimg",
            modalName: "村民",

            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            detailUrl: prefix + "/detail/{id}",

            search: false,
            showExport: true,
            columns: [{
                checkbox: true
            },
                {
                    field : 'vid',
                    title : '数据编号',
                    visible: false
                },
                /*{
                    field : 'aid',
                    title : '地域编号',
                    sortable: true
                },*/
                {
                    field : 'vname',
                    title : '姓名',
                    sortable: true
                },
                {
                    field : 'age',
                    title : '年龄',
                    sortable: true,
                    formatter: function(value, row, index) {
                        var idcard = row.idcard;

                        var strBirthday ="";
                       if(idcard==null){
                           var age="";
                       }else{
                           var len=idcard.length;
                        if(len == 18){
                            strBirthday=idcard.substr(6,4)+ "/" +idcard.substr(10, 2) + "/" + idcard.substr(12, 2);
                        }
                        if (len == 15) {
                            strBirthday = "19" + idcard.substr(6, 2) + "/" + idcard.substr(8, 2) + "/" + idcard.substr(10, 2);
                        }
                        var birthDate = new Date(strBirthday);
                        var nowDateTime = new Date();
                        var age = nowDateTime.getFullYear() - birthDate.getFullYear();

                        //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
                        if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
                            age--;
                        }

                        return [age,  ].join('');

                    }
                    }
                },
                {
                    field : 'sex',
                    title : '性别',
                    sortable: true
                },
                {
                    field : 'grouptype',
                    title : '所属村组',
                    sortable: true
                },
                {
                    field : 'politics',
                    title : '政治面貌',
                    sortable: true
                },
                {
                    field : 'marital',
                    title : '婚姻状况',
                    sortable: true
                },
                {
                    field : 'phone',
                    title : '联系方式',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + '"onclick="$.operate.detail(\'' + row.vid + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                        return actions.join('');
                    }
                }
               ]
        };
        $.table.init(options);
    });
</script>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <!--<input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
             &nbsp;	-->
            <a onclick="importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 点击下载excel模板</a>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
<!-- 上传区域 -->
<script id="importpt" type="text/template">

        <div class="col-xs-offset-1">
            <div align="center">

                <input class="file" type="file" id="pic" name="piclist" multiple data-min-file-count="1" data-theme="fas">
            </div>
                <table width="300" border="0" cellspacing="0" cellpadding="0"align="center">
                    <tr>
                        <td align="center" id="progressPersent"></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="progress-area">
                                进度
                                <div class="progress">
                                    <div class="progress-bar" id="progress" role="progressbar"  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" id="complete"></td>
                    </tr>
                </table>

            <font color="red" class="pull-left mt10">
                提示：仅允许导入“jpg”或“png”格式照片！
            </font>
        </div>
    <!--</form>-->
</script>


<script>
    // 下载模板
    function importTemplate() {
        $.get($.table._option.importTemplateUrl, function(result) {
            if (result.code == web_status.SUCCESS) {
                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
            } else if (result.code == web_status.WARNING) {
                $.modal.alertWarning(result.msg)
            } else {
                $.modal.alertError(result.msg);
            }
        });
    }
</script>
<script>
    // 导入数据
    function importExcel(formId){
        var currentId = $.common.isEmpty(formId) ? 'importTpl' : formId;
        layer.open({
            type: 1,
            area: ['400px', '230px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '导入' + $.table._option.modalName + '数据',
            content: $('#' + currentId).html(),
            btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 取消'],
            // 弹层外区域关闭
            shadeClose: true,
            btn1: function(index, layero){

                var file = layero.find('#file').val();
                if (file == '' || (!$.common.endWith(file, '.xls') && !$.common.endWith(file, '.xlsx'))){
                    $.modal.msgWarning("请选择后缀为 “xls”或“xlsx”的文件。");
                    return false;
                }
                var index = layer.load(2, {shade: false});
                //$.modal.disable();
                // 禁用按钮
                function disable() {
                    var doc = window.top == window.parent ? window.document : window.parent.document;
                    $("a[class*=layui-layer-btn]", doc).addClass("layer-disabled");
                };
                var formData = new FormData();
                formData.append("file", $('#file')[0].files[0]);
                formData.append("updateSupport", $("input[name='updateSupport']").is(':checked'));
                $.ajax({
                    url: $.table._option.importUrl,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function (result) {
                        if (result.code == web_status.SUCCESS) {
                            // 关闭全部窗体
                            layer.closeAll();
                            // 成功提示
                            function alertSuccess(content) {
                                // 弹出提示
                                layer.alert(content, {
                                    icon: $.modal.icon("success"),
                                    title: "系统提示",
                                    btn: ['确认'],
                                    btnclass: ['btn btn-primary'],
                                });
                            }
                            $.table.refresh();
                        } else if (result.code == web_status.WARNING) {
                            layer.closeAll();
                            // 启用按钮
                            function enable() {
                                var doc = window.top == window.parent ? window.document : window.parent.document;
                                $("a[class*=layui-layer-btn]", doc).removeClass("layer-disabled");
                            }
                            // 成功提示
                            function alertSuccess(content) {
                                // 弹出提示
                                layer.alert(content, {
                                    icon: $.modal.icon("success"),
                                    title: "系统提示",
                                    btn: ['确认'],
                                    btnclass: ['btn btn-primary'],
                                });
                            }
                            $.modal.alert("warning");
                        } else {
                            layer.closeAll();
                            function enable() {
                                var doc = window.top == window.parent ? window.document : window.parent.document;
                                $("a[class*=layui-layer-btn]", doc).removeClass("layer-disabled");
                            }
                            // 错误提示
                            function alertError(content) {
                                // 弹出提示
                                layer.alert(content, {
                                    icon: $.modal.icon("fail"),
                                    title: "系统提示",
                                    btn: ['确认'],
                                    btnclass: ['btn btn-primary'],
                                });
                            }
                            $.modal.alert("操作失败，插入数据与现有数据重复");
                        }
                    }
                });
            }
        });
    }
</script>
<script>
    // 批量上传图片
    function importphoto(formId){
        var currentId = $.common.isEmpty(formId) ? 'importpt' : formId;

        layer.open({
            type: 1,
            area: ['400px', '230px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '导入' + $.table._option.modalName + '数据',
            content: $('#' + currentId).html(),
            btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            btn1: function(index, layero) {
                // var file = layero.find('#file').val();
                // if (file == '' || (!$.common.endWith(file, '.jpg') && !$.common.endWith(file, '.png'))){
                //     $.modal.msgWarning("请选择后缀为 “jpg”或“png”的文件。");
                //     return false;
                // }


                //将上传的多个文件放入formData中

                var picFileList = document.getElementById("pic").files;

                var formData = new FormData();

                for(var i=0;i<picFileList.length;i++){
                    formData.append("file" , picFileList[i] );
                }



                //监听事件

                //xhr.upload.addEventListener("progress", onprogress, false);
                xhr.upload.onprogress = setProgress;
                //xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数

                var FileController = $.table._option.uploadUrl;
                xhr.open("POST", FileController,true);
                //记得加入上传数据formData
                xhr.send(formData);
                // xhr.onload = uploadSuccess;
                xhr.onreadystatechange = function() {

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        if(xhr.responseText == "succes"){



                            document.getElementById("complete").innerText ="上传成功！" ;

                        }else{

                            document.getElementById("complete").innerText ="上传失败！" ;

                        }

                    }

                }

            }
        });
    }


    var xhr = new XMLHttpRequest();

    //上传失败

    function uploadFailed(evt) {

        document.getElementById("progressBar").style.visibility="hidden";

        document.getElementById("complete").innerText ="上传异常！" ;

    }
    // 成功上传
    function uploadSuccess(event) {
        if (xhr.readyState === 4 && xhr.status === 200) { // 判断接口调用成功的重要标识

                alert('上传成功')

        }
    }
    /**

     * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

     */
    // 进度条
    function setProgress(event) {
        console.log(event)
        if (event.lengthComputable) {
            // 先判断这个上传进程是否有这个文件长度的判断
            loaded = event.loaded
            // 已经加载的字节
            total = event.total
            // 上传伊始时候计算的总字节数
            var complete = Number.parseInt(event.loaded / event.total * 100);
            // 取百分比
            progress.style.width = complete + '%';
            progress.innerHTML = complete + '%';
            // css 偷了懒，用了bootstrap4的css
        }
    }

</script>


</body>
</html>